<template>
  <div class="swiper-container" v-swiper:swiper="swiperOption" ref="swiperBox">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in discover" :key="index">
        <div class="content" v-show="!isShowComment">
          <content-swiper :raindropPic='item.topic'/>

          <description
            :descriptionInfo='{
            raindrop: item.name,
            descriptionInfo: item.introduction,
            commentNum: item.comment_num,
            user_id: item.user_id,
            tag_id: item.tag_id,
            is_catch: item.is_catch
            }'/>
          <div class="userInfo" @click='() =>_handleGoUser(item.user_id)'>
            <div class="avatar" :style="{backgroundImage:`url(${item.avatar})`}"></div>
            <div class="userOther">
              <div class="userName">{{item.nickname}}</div>
              <div class="common">
                <span class='commoneNum'>{{item.common_tag_num}}</span>
                <span class='commoneText'>Common Raindrop</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content" v-if="isShowComment">
          <comment :descriptionComment='{
            raindrop: item.name,
            descriptionInfo: item.introduction,
            commentNum: item.comment_num,
            }'/>
          <common-input
            :commentData='{
              user_id: item.user_id,
              tag_id: item.tag_id,}'/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters, mapActions } from 'Vuex'
  import ContentSwiper from './ContentSwiper'
  import Description from './Description'
  import Comment from './Comment'
  import CommonInput from '../common/CommonInput'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    components: { ContentSwiper, Description, Comment, CommonInput },
    props: {
      discoverData: {
        type: Array || Object,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        commentCont: '',
        // discover: this.discoverData,
        // 所有配置均为可选（同Swiper配置）
        swiperOption: {
          notNextTick: true,
          direction: 'vertical',
          slidesPerView: 1,
          // spaceBetween: 1,  //两个页面间的空隙
          mousewheel: true,
          autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
          on: {
            //监听滑动切换事件，返回swiper对象
            slideChange: () => {
              console.log(this.swiper.activeIndex) //滑动打印当前索引
              if (this.swiper.activeIndex === this.discover.length - 5) {
                //到最后一个加载更多数据
                this._renderDiscover()
              }
            }
          }
        }
      }
    },
    swiper() {
      // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
      return this.$refs.swiperBox.swiper
    },
    created() {
    },
    mounted() {

    },
    computed: {
      ...mapGetters([
        'isShowComment'
      ]),
      discover: {
        get: function() {
          return this.discoverData
        },
        set: function(newVal) {
          this.discoverData = this.discoverData.concat(newVal)
        }
      }
      // discover() {
      //   return this.discoverData
      // }
    },
    methods: {
      // 跳转用户me页面
      _handleGoUser(id) {
        this.$router.push({
          path: `/me/${id}`,
          // query: { uid: id }
        })
      },

      // 获取发现页内容
      async _renderDiscover(refresh) {
        const sid = Cookie.get('sid')
        this.$store.commit('_setSid', sid)
        const params = {
          sid: sid,
          refresh: refresh || 0,
          pagesize: 10
        }
        const res = await api.getDiscover(params)
        // console.log(res)
        if (res.status == 0) {
          this.discover = res.data
        } else {
          Toast(res.info)
        }
      },
      stopSwiper() {
        this.swiper.autoplay.stop()
      },
      startSwiper() {
        this.swiper.autoplay.start()
      }
    }
  }
</script>
<style scoped lang="scss">
  div {
    height: auto;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    height: calc(100% - 192px);
    font-size: 18px;
    display: flex;
    justify-content: center;
    background-color: #ffffff;

  }

  .content {
    width: 686px;
    height: 93%;
    margin-top: 36px;
    box-shadow: 0px 15px 65px 0px rgba(0, 0, 0, 0.15);
    border-radius: 48px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    position: relative;

    .userInfo {
      position: absolute;
      z-index: 3;
      min-width: 100px;
      height: 72px;
      top: 32px;
      left: 32px;
      display: flex;

      .avatar {
        width: 72px;
        height: 72px;
        border-radius: 100%;
        background: url("") no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
        border: 2px solid #A5A9AB;
        margin-right: 16px;
        box-sizing: content-box;
      }

      .userOther {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .userName {
          font-size: 28px;
          line-height: 28px;
          color: #E8E9E9;
        }

        .common {
          display: flex;
          color: #AAADAF;

          .commoneNum {
            width: 28px;
            height: 28px;
            background: rgba(216, 216, 216, .3);
            border-radius: 10px;
            text-align: center;
            line-height: 28px;
          }

          .commoneText {
            padding-left: 10px;
            font-size: 22px;
            line-height: 26px;
          }
        }
      }

    }
  }
</style>
